<template>
    <el-input v-model="localValue"
              v-bind="originInputProp"
              :clearable="true"
              :disabled="disabled"
              :readonly="readonly"
              v-on:focus="handleFocus($event)"
              v-on:blur="handleBlur($event)"
              v-on:change="emitChange"
              v-on:input="emitInput"
    >
        <StElUpload ref="stelupload"
                    v-bind="originUploadProp"
                    slot="prepend"
                    :disabled="disabled"
                    :readonly="readonly"
                    :show-file-list="false"
                    :on-success="handleSuccess"
                    :before-upload="beforeUpload"
        :on-error="onError">
            <el-button size="small" :loading="uploadLoading" type="primary">点击上传</el-button>
        </StElUpload>
        <el-button slot="append" v-if="canPreview" @click="preview"  :disabled="disabled"
                   :readonly="readonly">预览</el-button>
    </el-input>
</template>

<script>
    export default {
        name: 'StElUploadInput',
        components: {
        },
        props: {
            value:{
                type: String
            },
            disabled: {
                type: Boolean,
                default: false,
            },
            readonly: {
                type: Boolean,
                default: false,
            },
            originInputProp:{
                type: Object,
                default: function () {
                    return {}
                }
            },
            originUploadProp:{
                type: Object,
                default: function () {
                    return {}
                }
            },
            // 数据响应值格式化
            responseValueFormat:{
                type: Function
            },
            showPreviewButton:{
                type: Boolean,
                default: true
            }
        },
        computed:{
            canPreview(){
                return this.showPreviewButton && this.localValue && (this.accept && this.accept.indexOf('image') >=0 || this.$stStringTools.endWithAny(this.localValue,['jpg','png','gif'],true))
            },
        },
        data (){
            return {
                uploadLoading: false,
                localValue: this.value
            }
        },
        methods:{
            handleFocus (event) {
                this.$emit('focus', event)
            },
            handleBlur (event) {
                this.$emit('blur', event)
            },
            emitChange (val) {
                this.$emit('change', val)
            },
            emitInput (val) {
                this.$emit('input', val)
            },
            handleSuccess(res, file) {
                this.uploadLoading = false
                if (this.responseValueFormat) {
                    this.localValue = this.responseValueFormat(res)
                }else {
                    this.localValue = res.url
                }
            },
            beforeUpload(file) {
                this.uploadLoading = true
            },
            onError(err, file, fileList) {
                this.uploadLoading = false
                if (err.message) {
                    let errorVo = JSON.parse(err.message)
                    if (errorVo.errorMsg) {
                        this.$message.error(errorVo.errorMsg);
                    }
                }
            },
            // 预览
            preview (){
                this.$refs.stelupload.defaultPreview(this.value)
            }
        },
        watch: {
            value(val){
                this.localValue = val
            }
        }
    }
</script>
